<template>
	<view class="my">
        <view class="head">
            <u-image width="200rpx" height="200rpx" shape="circle" :src="personInfo.src"></u-image>
            <view class="userName">{{ personInfo.userName }}</view>
        </view>
		<view class="menu">
		
		</view>
		<view class="footer_list">
			<view v-if="!loginStatus">
				<navigator class="n_link" url="../login/login" hover-class="navigator-hover">
					<span><view class="line"></view>登录</span><span class="iconfont icon-xiangyou1"></span>
				</navigator>
				<navigator class="n_link" url="../register/register" hover-class="navigator-hover">
					<span><view class="line"></view>注册</span><span class="iconfont icon-xiangyou1"></span>
				</navigator>
			</view>
			<view v-else>	
				<view class="n_link" @click="exitLogin">
					<span><view class="line"></view>退出</span><span class="iconfont icon-xiangyou1"></span>
				</view>
			</view>
		</view>
        <bottomTabBar></bottomTabBar>
	</view>
</template>

<script>
    import {mapState} from 'vuex';
    import bottomTabBar from '@/components/bottom-tabbar.vue';
	export default {
        components: {
            bottomTabBar
        },
		data() {
			return {
                userInfo: {
                    phone: '',
                    userName: '',
                    src: '',
                    token: ''
                }
			}
		},
        computed: {
            ...mapState({
                personInfo: state => state.personInfo,
                loginStatus: state => state.loginStatus
            })
        },
		methods: {
            /**
             * 退出登录
             * */
			exitLogin() {
                uni.removeStorageSync('phone')
                uni.removeStorageSync('userName')
                uni.removeStorageSync('src')
                uni.removeStorageSync('token')
                this.$updateParams(['personInfo', {phone: ''}])
                this.$updateParams(['personInfo', {userName: ''}])
                this.$updateParams(['personInfo', {src: ''}])
                this.$updateParams(['personInfo', {token: ''}])
                this.$updateParams(['loginStatus', false])
            }
		},
		onShow() {
		},
        onLoad() {
        },
		mounted() {
		}
	}
</script>

<style scoped lang="less">
    .my {
        padding: 15rpx;
        .head {
            margin-left: 30rpx;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .userName {
                margin-left: 30rpx;
                font: bold 36rpx arial;
            }
        }
        .footer_list {
        	border-radius: 20rpx;
        	overflow: hidden;
        	margin: 30rpx 0;
            
        	>view {
        		background-color: #fff;
        		margin-bottom: 1px;
                
        		.n_link {
        			padding: 26rpx 14rpx 26rpx 30rpx;
        			display: flex;
        			justify-content: space-between;
                    
        			span {
        				display: flex;
        				justify-content: space-between;
        				font-size: 32rpx;
                        
        				.line {
        					height: 24rpx;
        					width: 0;
        					border-left: 7rpx solid #55aaff;
        					margin-top: 10rpx;
        					margin-right: 22rpx;
        				}
        			}
        			.iconfont {
        				color: #999999;
        				border: none;
        			}
        		}
        	}
        	
        }
    }
</style>
